<template>
  <div class="boxsty zhiBiao">
<!--    <div class="flex justifyContentSpaceBetween">-->
<!--      <div class="tabletext">指标项列表</div>-->
<!--    </div>-->
    <div  :height="searchheight" v-if="showSearch" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "收起" : "展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline" v-if="showSearch">
              <el-form-item label="">
                <el-checkbox-group v-model="dataForm.check">
                  <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{item.NAME}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <!--        <el-form-item>-->
              <!--          <el-button icon="el-icon-search" type="primary" class="marginLeft"-->
              <!--                     @click="getDataList(1)">检索-->
              <!--          </el-button>-->
              <!--        </el-form-item>-->
            </el-form>
           </div>
    </div>
    <div class="table-header-btn-box">
      <!-- <el-button type="primary" v-if="tianBaoTable.lastPage=='jgtb'">批量加扣</el-button> -->
      <el-button type="primary" @click="saveZhibiaoData">保存</el-button>
      <el-button type="primary" @click="fnBackOldPage">关闭</el-button>
    </div>
    <div class="avue-crud">
      <el-table
        ref="zhibiaotable"
        style="width: 100%;margin-top:20px"
        :data="dataList"
        border
        v-loading="dataListLoading">
        <el-table-column
          label="选择"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column type="index" width="60" header-align="center" align="center" label="序号"></el-table-column>
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          min-width="100"
          label="被考核人姓名">
          <template slot="header" slot-scope="scope">
            <span>被考核人姓名</span><span class="mg-l10">({{dataList.length}}人)</span>
          </template>
        </el-table-column>
        <el-table-column  v-for="(item,index) in list" :key="index" align="center" :label="item.name">
          <template slot="header" slot-scope="scope">
            <span>{{ item.name }}</span><span class="mg-l10">({{dataList|filterNum(item,index)}}个)</span>
          </template>
          <el-table-column v-if="false"
            header-align="center"
            align="center"
            min-width="100"
            label="任务指标表id">
            <template slot-scope="scope">
              <el-input v-model="scope.row['zbId'+(index+1)]" placeholder="任务指标表id"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="重要程度">
            <template slot-scope="scope">
              <el-input :disabled="!scope.row['zbId'+(index+1)]" v-model="scope.row['zycd'+(index+1)]" placeholder="重要程度" @change="fnChangeMuB(scope.row['zycd'+(index+1)],'zycd'+(index+1),scope.$index,'zbId'+(index+1))"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            min-width="100"
            align="center"
            label="完成难度">
            <template slot-scope="scope">
              <el-input :disabled="!scope.row['zbId'+(index+1)]" v-model="scope.row['wcnd'+(index+1)]" placeholder="完成难度"  @change="fnChangeMuB(scope.row['wcnd'+(index+1)],'wcnd'+(index+1),scope.$index,'zbId'+(index+1))"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="工作目标">
            <template slot-scope="scope">
              <el-input :disabled="!scope.row['zbId'+(index+1)]" v-model="scope.row['workTarget'+(index+1)]" placeholder="工作目标"  @change="fnChangeMuB(scope.row['workTarget'+(index+1)],'workTarget'+(index+1),scope.$index,'zbId'+(index+1))"></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- <el-table-column  align="center" label="营业额">
          <el-table-column
            prop="htZq"
            header-align="center"
            align="center"
            label="目标值">
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="单位">
          </el-table-column>
          <el-table-column
            prop="htSydx"
            header-align="center"
            align="center"
            label="完成值">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="制单数">
          <el-table-column
            prop="htZq"
            header-align="center"
            align="center"
            label="目标值">
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="单位">
          </el-table-column>
          <el-table-column
            prop="htSydx"
            header-align="center"
            align="center"
            label="完成值">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="服务满意度">
          <el-table-column
            prop="htZq"
            header-align="center"
            align="center"
            label="目标值">
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="单位">
          </el-table-column>
          <el-table-column
            prop="htSydx"
            header-align="center"
            align="center"
            label="完成值">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="服务态度">
          <el-table-column
            prop="htZq"
            header-align="center"
            align="center"
            label="目标值">
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="单位">
          </el-table-column>
          <el-table-column
            prop="htSydx"
            header-align="center"
            align="center"
            label="完成值">
          </el-table-column>
        </el-table-column> -->
      </el-table>
    </div>
<!--    <div class="avue-crud__pagination">-->
<!--      <el-pagination-->
<!--        @size-change="sizeChangeHandle"-->
<!--        @current-change="currentChangeHandle"-->
<!--        :current-page="pageIndex"-->
<!--        :page-sizes="[10, 20, 50, 100]"-->
<!--        :page-size="pageSize"-->
<!--        :total="totalPage"-->
<!--        background-->
<!--        layout="total, sizes, prev, pager, next, jumper">-->
<!--      </el-pagination>-->
<!--    </div>-->
  </div>
</template>

<script>
import {fetchList, delObj} from '@/api/hetongrenwu/hetonghtxxdjb'
import {mapGetters} from 'vuex'
import {getZhibiaoCheckndData,getZhibiaoData,saveZhibiaoData} from '@/api/hetongrenwu/zhongdian/renwuchuangjian'

export default {
  props:{
    // tianBaoTable:{}
  },
  data() {
    return {
      pageTitle:'重点任务',
      dataForm: {
        check: []
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radio:'1',
      radioTwo:'1',
      zhiShow:'1',
      zhibiaoForm:{

      },
      lastPage:'tbfq',
      showSearch:true,
      showBackBtn:true,
      checkList:[],
// checkList:[
//         {value:'1',name:'工资核算范围数量'},
//          {value:'2',name:'人服化'},
//          {value:'3',name:'服务满意度'},
//          {value:'4',name:'服务态度'},
//          {value:'5',name:'柔性团队项目'},
//         {value:'6',name:'多企通人才培养'},
//          {value:'7',name:'年度重点工作'},
//          {value:'8',name:'阶段重点工作'},
//      ],
      searchadvanced: true,
      searchheight: '0',
      list:[]
    }
  },
  watch:{
    "dataForm.check"(newValue){
      if(newValue.length>0){
           //交集
          this.list = this.checkList.filter(x=>{
            return newValue.some(y=>{
              return x.id==y;
            })
          })
       this.getDataList();
      }

    }
  },
  filters:{
    filterNum(dataList,listItem,index){
      var num=0;
      var arr=dataList.filter(item=>{
        return item['zbId'+(index+1)]
      })
      num=arr.length
      return num
    }
  },
  created() {
    this.getZhibiaoCheckndData()
    //this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    saveZhibiaoData(){
     //console.log(this.$refs.zhibiaotable.data);
      saveZhibiaoData(this.$refs.zhibiaotable.data).then(response => {
        this.$message.closeAll();
        this.$message.success('保存成功')
      })
    },
    getZhibiaoCheckndData(){
      getZhibiaoCheckndData().then(response => {
        this.checkList=response.data.data
       //console.log(JSON.stringify(this.checkList)+"===ddd")
      })
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= 'auto'
      }
    },
    //复选框选中数据时批量更改目标值
    fnChangeMuB(val,prop,index,isEdit){
     //console.log(val,prop,index,isEdit)
      //zhibiaotable
      var selectedData=this.$refs.zhibiaotable.selection;
     //console.log(selectedData)
      if(selectedData.length>0){
        selectedData.forEach(item=>{
          if(item[isEdit]){
            item[prop]=val;
          }
        })
       //console.log(selectedData)
        //this.dataList[index]
      }
    },
    init(data) {
      // this.lastPage = data.lastPage;
      this.showSearch = data.showSearch;
      this.pageTitle=data.pageTitle;
      this.showBackBtn=data.showBackBtn;
    },
    // 获取数据列表
    getDataList() {
      var params={
        idArray: this.dataForm.check,
        str:1,
        typestr:"1"
      }
     //console.log(this.dataForm.check+"==chek")
      getZhibiaoData(params).then(response => {
        this.dataList=response.data.data
            //console.log(JSON.stringify(this.dataList))
      })
 
    /*  return;
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      })).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false*/
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    //子集信息
    zhibiaoChild(zhibiaoChild){
      if(zhibiaoChild){
        this.zhiShow=1
      }
    },
    //新增子集返回的数据(关闭修改页面，打开指标库维护)
    openZhibiao(data){
      this.addOrUpdateVisible = false;
      this.zhiShow=2;
      this.zhibiaoForm={
        enter:0,
        disabled:false
      }
    },
    //返回原来的页面
    fnBackOldPage(){
      this.$emit('fnBackOldPage','返回原页面')
    },
    selectAll(){
      reserve-selection

    }
  }
}
</script>
